<!-- Tabs导航条 -->
<template>
  <Tabs
    ref="el"
    v-model:activeKey="menuStore.activeSiderMenu"
    hide-add
    type="editable-card"
    class="je-admin-navigation-tabs"
    @edit="closeSiderMenu"
  >
    <TabPane v-for="menu in menuStore.computeOpenMenus" :key="menu.id" :closable="false">
      <template #tab>
        <Dropdown :trigger="['contextmenu']">
          <span class="tabs-tab" :data-id="menu.id">
            <i :class="['tabs-tab-icon', menu.icon]"></i>{{ menu.text }}
          </span>
          <template #overlay>
            <Menu style="margin-top: 20px" @click="menuClick">
              <MenuItem
                v-for="info in closeSiderMenuInfo"
                :key="info.code"
                :menu="menu.id"
                :disabled="!enableCloseSiderMenu(menu.id, info.code)"
              >
                {{ info.text }}
              </MenuItem>
            </Menu>
          </template>
        </Dropdown>
        <i
          v-if="menuStore.computeOpenMenus.length > 1 && showDeleteIcon"
          class="je-admin-navigation-delete-icon fal fa-remove"
          @click="
            (event) => {
              event.stopPropagation();
              menuClick({ item: { menu: menu.id }, key: 'closeSelf' });
            }
          "
        ></i>
      </template>
    </TabPane>
  </Tabs>
</template>
<script>
  import { defineComponent } from 'vue';
  import { Tabs, Menu, Dropdown } from '@jecloud/ui';
  import { getSystemConfig } from '@jecloud/utils';
  import { useMenuStore } from '@/stores/menu-store';
  import { LayoutType } from '@/data/enum/layout';
  import {
    closeSiderMenu,
    closeSiderMenuInfo,
    enableCloseSiderMenu,
    openMenu,
  } from '@/hooks/use-menu';
  import { useTabs } from '../hooks/useTabs';
  export default defineComponent({
    name: 'AdminNavigationTabs',
    components: {
      Tabs,
      TabPane: Tabs.TabPane,
      Dropdown,
      Menu,
      MenuItem: Menu.Item,
    },
    setup() {
      // 系统前端变量是否展示删除图标
      const showDeleteIcon = getSystemConfig('JE_ADMIN_TABS_NAVIGATION_DELETE') == '1';
      const menuStore = useMenuStore();
      const { el } = useTabs();
      // 右键菜单
      const menuClick = ({ item, key }) => {
        if (key === 'open') {
          openMenu({ id: item.menu, layout: LayoutType.APP });
          // 打开后，关闭自己
          enableCloseSiderMenu(item.menu) && closeSiderMenu(item.menu, 'closeSelf');
        } else {
          closeSiderMenu(item.menu, key);
        }
      };
      return {
        enableCloseSiderMenu,
        menuStore,
        closeSiderMenu,
        closeSiderMenuInfo,
        menuClick,
        el,
        showDeleteIcon,
      };
    },
  });
</script>
<style lang="less">
  .je-admin-navigation-tabs {
    &.ant-tabs-top.ant-tabs-card {
      & > .ant-tabs-nav {
        margin: 0 !important;
        &::before {
          display: none;
        }
        .ant-tabs-tab {
          background-color: transparent;
          border-width: 0;
          transition-duration: 0.2s;
          padding: 9px 12px;
          .tabs-tab-icon {
            margin-right: 4px;
          }
          .je-admin-navigation-delete-icon {
            font-size: 12px;
            width: 13px;
            height: 13px;
            text-align: center;
            margin-left: 8px;
            line-height: 13px;
            &:hover {
              background: #ddd;
              border-radius: 20%;
            }
          }
          &-remove {
            width: 0;
            padding-left: 0;
            padding-right: 0;
            overflow: hidden;
            transition: all 0.2s ease;
          }
          &:hover,
          &.ant-tabs-tab-active {
            .ant-tabs-tab-remove {
              width: auto;
              padding-left: 6px;
              padding-right: 6px;
            }
          }

          &.ant-tabs-tab-active {
            background-color: @je-menu-item-active-bg;
            border-bottom-color: @je-menu-item-active-bg;
            border-top-right-radius: 5px;
            border-top-left-radius: 5px;
          }
        }
        .ant-tabs-tab-sortable-ghost {
          visibility: hidden;
        }
      }
    }
    .ant-dropdown-trigger {
      .tabs-tab-icon {
        margin-right: 4px;
      }
    }
  }
  .ant-tabs-dropdown {
    &-menu {
      &-item {
        .tabs-tab-icon {
          margin-right: 4px;
        }
      }
    }
  }
  .ant-tabs-dropdown.ant-tabs-dropdown-placement-bottomRight {
    .je-admin-navigation-delete-icon {
      display: none;
    }
  }
</style>
